<script>
import imageUpload from "@/components/imageUpload/index.vue"
import request from "@/utils/request"

export default {
  name: "studyImagesUpload",
  components: { imageUpload },
  props: {
    details: Object,
  },
  watch: {
    details: {
      handler(val) {
        if (val.studyImagesList && val.studyImagesList.length > 0) {
          this.studyImagesList = val.studyImagesList
          //末尾插入一个空的项
          this.studyImagesList.push("")
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      studyImagesList: [""],
      //是否有未提交的更改
      // hasUnsavedChanges: false,
    }
  },
  methods: {
    //上传追加学习图片
    uploadStudyImages() {
      //排除掉空的项
      const studyImagesList = JSON.parse(JSON.stringify(this.studyImagesList)).filter((item) => item)
      //检查用户是否有上传图片
      if (studyImagesList.length === 0) {
        uni.showToast({
          title: "请上传学习图片",
          icon: "none",
        })
        this.$emit("onError")
        return
      }
      //提交
      request({
        url: "studyRoomUserPlan/updateStudyImages",
        data: {
          userPlanId: this.details.userPlanId,
          studyImagesList: studyImagesList,
        },
        showLoading: true,
        errorHandle: true,
      })
        .then(() => {
          // this.hasUnsavedChanges = false
          this.$emit("afterUpload")
        })
        .catch(() => {
          this.$emit("onError")
        })
    },
  },
  emits: ["afterUpload", "onError", "onChooseFile"],
}
</script>

<template>
  <view class="image-upload-container">
    <view class="tips">拍照或截图记录本次学习情况吧~</view>
    <!--					文件上传组件-->
    <view class="upload-component-list">
      <view class="upload-component" v-for="(item, index) in studyImagesList" :key="index">
        <image-upload
          width="170rpx"
          height="170rpx"
          v-model="studyImagesList[index]"
          :allow-delete="true"
          :uploadParams="{ dir: 'studyRoom' }"
          @change="
            (val) => {
              // hasUnsavedChanges = true
              if (val) {
                studyImagesList.push('')
              } else {
                studyImagesList.splice(index, 1)
              }
              //上传提交
              uploadStudyImages()
            }
          "
          @onError="() => $emit('onError')"
          @onChooseFile="() => $emit('onChooseFile')"
        ></image-upload>
      </view>
    </view>
    <!--					上传按钮-->
    <!--    <view class="upload-btn-container d-flex justify-end">-->
    <!--      <view class="upload-btn d-flex align-center justify-center" @click="uploadStudyImages">提交</view>-->
    <!--    </view>-->
  </view>
</template>

<style scoped lang="scss">
.image-upload-container {
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #2cb980;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;

  > .tips {
    font-size: 30rpx;
    color: var(--text-color-light);
  }

  > .upload-component-list {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;

    > .upload-component {
      margin-right: 30rpx;
      margin-bottom: 30rpx;
    }
  }

  //> .upload-btn-container {
  //  > .upload-btn {
  //    width: 140rpx;
  //    height: 56rpx;
  //    color: white;
  //    background: #2cb980;
  //    border-radius: 8rpx 8rpx 8rpx 8rpx;
  //    font-size: 30rpx;
  //  }
  //}
}
</style>
